<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="lib/react.js"></script>
    <script src="lib/react-dom.js"></script>
    <script src="lib/browser.js"></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-image: url("bg.jpg");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            background-color: #000;
        }
        .container{
            width: 500px;height: 100%;
            margin: 0 auto;
            text-align: center;
            padding-top: 100px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    

    <div  id="root"></div>

    <script  type="text/babel">

        

        const Style = {
            winner:{fontSize:"56px",color:"#000"}
        }

        class App extends React.Component{
            
            
            constructor(props){
                super(props)

                this.state = {
                    winner:"谁是大赢家？",
                    students: ["张志阳", "李梦雪", "申柯", 
                    "王晓冬", "张金龙", "尹彪彪", "范俊丹", "姜晓航",
                     "向博", "李杰", "赵勃斌", "朱曾光", "檀清华",
                      "王倪聪", "黄友君", "屈姣秀", "吕艳琴", "鲁明文",
                       "郭振男", "段秉君", "弓嗣荣", "张明凯 ", "刘瑞",
                        "柳旭", "朱恬恬", "刘学雷"],
                    timer:null,
                    isStart:false
                }
            }

            startFunc(){


                if(!this.state.isStart){

                    this.setState({
                        isStart:true
                    })
                    var len = this.state.students.length;
                    var timer = setInterval( () =>{


                        var ran = Math.floor(Math.random()*len);
                        var the = this.state.students[ran];

                        this.setState({
                            winner: the
                        })

                    },100)  
                    
                    this.setState({
                        timer:timer
                    })
                }else{
                    this.setState({
                        isStart:false
                    })

                    clearInterval(this.state.timer)
                }
                            

            }

            addStu(){
                var name = this.refs.inputname.value;
                console.log(name)

                console.log('before:',this.state.students)


                var students = this.state.students;
                students.push(name);
                this.setState({
                    students:students
                })

                console.log('after:',this.state.students)
            }
            


            render(){
                return(<div  className="container">
                    


            
                    <h1  style={Style.winner}>{this.state.winner}</h1>

                    <input  ref="inputname"/>  
                    <button  onClick={this.addStu.bind(this)}>添加</button>




                    <button   style={{width:"100px",height:"35px"}}  onClick={this.startFunc.bind(this)}>开始</button>
                    
                    
                    </div>)
            }
        }


        //jsx     javascript + xml  
        ReactDOM.render(<App/>,document.getElementById("root"))

    </script>
</body>
</html>


